/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="mirror">
        <div class="header">
            <i class="sf-comp-iconfont icon-comp-win-info warning-icon"></i>
            <div class="title">
                <lang>确定要停止{{ name }}项目吗</lang>
            </div>
        </div>
        <div class="desc">
            <lang>实例正在运行，停止可能会使手动安装的环境丢失，可先保存环境镜像。</lang>
        </div>
        <div class="btn__wrap" @click="_addImage(name)">
            <i class="iconfont iconjingxiang btn__icon"></i>
            <div class="btn__label">
                <lang>保存镜像</lang>
            </div>
        </div>
        <div class="info">
            <lang>无需保存镜像？可点击确定</lang>
        </div>
    </div>
</template>
<script>


import store from 'src/vuex/store';
import addImageForm from 'src/home/mod_cluster/common/common_form/add_image_form.vue';
import deployUrlAdapter from 'src/home/mod_common/deploy_url_adapter';
import {getStorage} from 'src/util/local_storage';

let userID = store.state.userId;
const IMAGE_URLS = {
    get: deployUrlAdapter(`users/${userID}/images`),
    post: deployUrlAdapter(`users/${userID}/commitimage`)
};

export default {
    props: {
        projectId: {
            type: String
        }
    },
    data() {
        return {
            name: '',
        };
        
    },
    components: {},
    mounted() {
        this.name = getStorage('recordName');
    },
    methods: {
        // 新增/编辑算法的卡片信息
        async ajaxSubmitImageInfo(params, formWin) {
            formWin.$mask();
            const ADD_TYPE_URL = `${IMAGE_URLS.post}`;
            let jsonData = await this.$ajax.post(ADD_TYPE_URL, params);
            formWin.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            }
            this.$ok(_('保存成功'));
            formWin.hide();
            
            await this.refreshGrid();
        },
        // 新增镜像弹窗
        _createImageFormWin() {
            if (!this.imageFormWin) {
                this.imageFormWin = this.$modal(addImageForm, {
                    autoDestory: true
                });
            }
            return this.imageFormWin;
        },
        
        // 新增镜像
        _addImage(name) {
            this._createImageFormWin();
            this.imageFormWin.formRoot.refreshCardInfo();
            this.imageFormWin.open({
                reset: true,
                title: _('保存为镜像'),
                data: {
                    showDefaultAddress: false
                },
                submit: () => {
                    let ajaxParams = this.imageFormWin.formRoot.getJsonValue();
                    ajaxParams.notebookName = name;
                    ajaxParams.projectId = this.projectId;
                    this.ajaxSubmitImageInfo(ajaxParams, this.imageFormWin);
                }
            });
        },
        
    }
};
</script>

<style lang="less" scoped>
.mirror {
    text-align: center;
    
    .header {
        display: flex;
        justify-content: center;
        align-items: center;
        
        .title {
            color: #000;
            font-size: 18px;
        }
        
        .warning-icon {
            font-size: 21px;
            margin-right: 10px;
            color: #2c2a2a;
        }
    }
    
    .desc {
        font-size: 12px;
        color: #333333;
        margin: 22px 0;
    }
    
    .btn__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        width: 178px;
        background-color: #2C2A2A;
        color: white;
        padding: 7px 40px;
        margin: auto;
        cursor: pointer;
        
        .btn__icon {
            font-size: 19px;
            margin-right: 10px;
        }
    }
    
    .info {
        color: #969696;
        font-size: 12px;
        margin-top: 21px;
    }
}
</style>


